<template>
  <div class="news">
    <img src="/NewsCenter-banner.png" alt="">
    <div class="nav">
      <el-menu
       :default-active="activeIndex" 
       class="el-menu-demo container" 
       mode="horizontal" 
       @select="handleSelect" 
       router 
       active-text-color='#5bacff'
       text-color='rgba(102,102,102,1)'
       >
        <el-menu-item index="/3/3-1">企业新闻</el-menu-item>
      </el-menu>
    </div>
    <!-- <overview></overview> -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '/3/3-1',
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
    },
    activeIn () {
      this.activeIndex =this.$route.path
      // console.log(this.activeIndex)
    }
  },
  mounted () {
    this.activeIn ()
  }
}
</script>

<style lang="scss" scoped>
.news{
  img{
    display: block;
    width: 100%;
  }
  .nav{
    background: rgba(255,255,255,1);
    box-shadow: 0px 2px 18px 4px rgba(148,167,182,0.2);
    .el-menu-demo{
      display: flex;
      justify-content: center;
    }
    .el-menu-item{
      transition: font-size .3s linear;
      font-size: 14px;
      width: 100px;
      &:hover{
        font-size: 16px;
        color: #5bacff;
      }
    }
  }
}
</style>

<style lang="scss">
.news_title{
    margin: 50px auto;
    h3{
      font-size: 25px;
      font-weight: 500;
      color: rgba(51,51,51,1);
      line-height: 33px;
      text-align: center;
    }
    p{
      font-size: 15px;
      font-weight: 400;
      color: #999;
      line-height: 25px;
      text-align: center;
    }
  }
</style>
